<template>
	<view v-if="userInfo" class="my-page" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<view ref="head" class="head" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
			<uni-icons size="28" color="#707070" type="bars"  @click="showAsideDrawer"></uni-icons><myuni-search class="search-input">我吹过你吹过的晚风</myuni-search><uni-icons color="#707070" size="28" type="search"></uni-icons>
		</view>
		<navigator url="/pages/user/user" class="user-head" v-if="userInfo">
			<image :src="userInfo.profile.avatarUrl" :lazy-load="true" mode="widthFix"></image>
			<view class="info">
				<text class="nickname">{{userInfo.profile.nickname}}</text>
				<text class="grade">Lv{{6}}</text>
			</view>
			<text class="iconfont icon-xia icon"></text>
		</navigator>
		<view class="card">
			<scroll-view enable-flex="true" class="scroll-nav">
			  <navigator url="/pages/my/collection" class="scroll-nav-item">
			  	<view class="nav-icon":class="themeType==='light'?'':'bgc'">
			  	  <i class="iconfont icon-jushoucanggift":class="themeType==='light'?'icon-light':'icon'"></i>
			  	</view>
			  	<text class="nav-name">收藏</text>
			  </navigator>
			  <view  class="scroll-nav-item" @click="recentPlay">
			  	<view class="nav-icon":class="themeType==='light'?'':'bgc'">
			  	  <i class="iconfont icon-24gf-playlistMusic":class="themeType==='light'?'icon-light':'icon'"></i>
			  	</view>
			  	<text class="nav-name">最近播放</text>
			  </view>
			  <navigator url="" class="scroll-nav-item">
			  	<view class="nav-icon":class="themeType==='light'?'':'bgc'">
			  	  <i class="iconfont icon-dianzan_kuai":class="themeType==='light'?'icon-light':'icon'"></i>
			  	</view>
			  	<text class="nav-name">点赞</text>
			  </navigator>
			  <navigator :url="'/pages/my/fans?id='+userInfo.profile.userId" class="scroll-nav-item">
			  	<view class="nav-icon":class="themeType==='light'?'':'bgc'">
			  	  <i class="iconfont icon-24gf-playlistHeart":class="themeType==='light'?'icon-light':'icon'"></i>
			  	</view>
			  	<text class="nav-name">粉丝列表</text>
			  </navigator>
			</scroll-view>
		</view>
		<myuni-userinfo v-if="userInfo" :userId="userInfo.profile.userId"></myuni-userinfo>
		<myuni-player  :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
		<!-- aside-start -->
		<!-- #ifdef H5 -->
		<uni-drawer ref="aside_drawer" :width="300" class="aside-drawer" :class="themeType==='light'?'light':'dark'" @touchstart.native="asideTouchstart" @touchmove.native="asideTouchmove" @touchend.native="asideTouchend">
			<myuni-aside></myuni-aside>
		</uni-drawer>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<uni-drawer ref="aside_drawer" :width="270" class="aside-drawer" :class="themeType==='light'?'light':'dark'">
			<myuni-aside></myuni-aside>
		</uni-drawer>
		<!-- #endif -->
		<!-- aside-end -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				currntSong:{},
				asideTouch:{
				  startClientX:0,
				  startClientY:0,
				  left:0,
				  width:0
				}
			}
		},
		onLoad() {
			if(!this.userInfo){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.initCurrntSong()
		},
		onShow() {
			if(!this.userInfo){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.initCurrntSong()
		},
		computed:{
			...mapState(['themeType','cookie','userInfo'])
		},
		methods: {
			showAsideDrawer() {
			    if(!this.profile){
			    	uni.navigateTo({
			    		url:"/pages/login/login"
			    	})
			    }else{
					this.$refs.aside_drawer.open();
					//#ifdef H5
					 this.$nextTick(()=>{
					 	var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
					 	this.asideTouch.width=parseInt((asideEl.style.width).replace(/px/g,""))
					 })
					//#endif
			    }
			},
			initCurrntSong(){
				if(uni.getStorageSync('music').url){
					var music = uni.getStorageSync('music')
					if(music.playing){
						delete music.url
					}
					this.currntSong = music
				}
			},
			ChangeSong(isNext){
				let playlist=uni.getStorageSync('playlist')
				if(isNext){
					var index
					this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
				}else{
					var index
					this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
				}
				playlist[index].index=index
				if(this.currntSong.type==='playlist'){
					this.getSong(playlist[index])
				}
				else if(this.currntSong.type==='newMusic'){
					this.enterNewMusic(playlist[index])
				}
			},
			recentPlay(){
				this.request({
				    url:"/user/playlist?uid="+this.profile.userId+"&cookie="+this.cookie
				}).then(res=>{
					let id =res.playlist[0].id
					uni.navigateTo({
						url:'/pages/playlist/mylist?id='+id
					})
				})
			},
			//#ifdef H5
			 asideTouchstart(e){
			 	this.asideTouch.startClientX=e.touches[0].clientX;
				this.asideTouch.startClientY=e.touches[0].clientY;
			 },
			 asideTouchmove(e){
			 	if((this.asideTouch.startClientX-e.touches[0].clientX)>30&&Math.abs(this.asideTouch.startClientY-e.touches[0].clientY)<30){
					var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
			 		var left=this.asideTouch.width-e.touches[0].clientX
			 		if(left>0){
			 			this.asideTouch.left=left
						asideEl.style.left=-left+"px"
			 		}
			 	}
			 },
			 asideTouchend(e){
			 	if(this.asideTouch.left>=100) {
			 		this.$refs.aside_drawer.close();
			 		this.asideTouch.left=0
			 	}else{
			 	  var asideEl=this.$refs.aside_drawer.$el.childNodes[1]
			 	  asideEl.style.left=0
			 	}
			 },
			 //#endif
		}
	}
</script>
<script module="render" lang="renderjs">
	export default {
		mounted() {
		  //#ifdef APP-PLUS || H5
		  document.addEventListener("scroll", (e)=>{
			  let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
			  if(scrolled>40){
			    this.$refs.head.$el.style.opacity=1
			  }else{
			    this.$refs.head.$el.style.opacity=0.7
			  }
		  })
		  //#endif
		}
	}
</script>
<style lang="scss" scoped>
.my-page{
	padding: 112rpx 40rpx 200rpx;
	/*  #ifdef  APP-PLUS  */
	padding: 168rpx 40rpx 0;
	/*  #endif  */
	.head{
		position: fixed;
		width: 100%;
		left:0;
		top:0;
		box-sizing: border-box;
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		z-index: 999;
		/*  #ifdef  APP-PLUS || H5  */
		opacity: 0.7;
		/*  #endif  */
		transition: opacity 0.7s linear;
		.search-input{
		  flex: 1;
		}
	}
	/*  #ifdef  APP-PLUS  */
	.head{
		padding: 66rpx 10rpx 10rpx;
	}
	/*  #endif  */
	.light{
		z-index: 9999;
		::v-deep.uni-drawer__content{
			background-color: $bg-light-deep;
		}
	}
	.dark{
		z-index: 9999;
		::v-deep.uni-drawer__content{
			background-color: $bg-dark-deep;
		}
	}
	.user-head{
		padding: 20rpx 0;
		display: flex;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.info{
			padding-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #535355;
			.nickname{
				font-weight: 700;
			}
			.grade{
				width: 96rpx;
				text-align: center;
				color: #fff;
				background-color: #535355;
				border-radius: 20rpx;
			}
		}
	}
	.card{
		box-sizing: border-box;
		padding: 20rpx 0;
		width: 100%;
		border-radius: 20rpx;
	}
	.scroll-nav{
	  display: flex;
	  width: 100%;
	  height: 140rpx;
	  white-space: nowrap;
	  touch-action: none !important;
	  ::v-deep.uni-scroll-view{
		  overflow: unset !important;
	  }
	  ::v-deep.uni-scroll-view-content{
		  display: flex;
		  flex-wrap:wrap;
		  justify-content: space-between;
	  }
	  .scroll-nav-item{
	  	box-sizing: border-box;
	  	flex-shrink: 0;
	  	display: flex;
	  	flex-direction: column;
	  	justify-content: space-around;
	  	align-items: center;
	    width: 160rpx;
		height: 150rpx;
	  	// color: #FFFFFF;
	  	.nav-icon{
	  		display: flex;
	  		align-items: center;
	  		justify-content: center;
	  		width: 80rpx;
	  		height: 80rpx;
	  		border-radius: 50%;
	  		// background-color: #250f16;
			i{
			  font-size: 46rpx;
			  // color: #dd001b;
			}
	  	}
	  	.nav-name{
	  		font-size: 28rpx;
	  		color: #535355;
	  	}
	  }
	}
}
</style>
